<template>
	<view :data-theme="theme" class="u-skeleton main order-submission">
		<skeleton :show="showSkeleton" :isNodes="isNodes" ref="skeleton" loading="chiaroscuro" selector="skeleton"  bgcolor="#FFF"></skeleton>
		
		<view class="skeleton"  :style="{visibility: showSkeleton ? 'hidden' : 'visible'}">
			<view class="column  " style="background-color: #FFFFFF;width: 95%; margin: 10px;border-radius: 5px;">
			<view v-if="planInfo&&planInfo.planType==3&&planInfo.isMust==0" style="margin: 10px 0 0 12px;color: #007AFF;font-size: 15px;font-weight: 600;">
				需预约满{{planInfo.lowestNum}}人发车
			</view>
			<view v-if="planInfo&&planInfo.planType==3&&planInfo.isMust==1" style="margin: 10px 0 0 12px;color: #ff0a0a;font-size: 15px;font-weight: 600;">
				已众筹拼车成功
			</view>
			<!-- 去程 -->
			<view v-if="planInfo&&planInfo.isReturnTrip" class="skeleton-rect">
				<view class="row-center skeleton-rect" style="margin: 10px 0 0 12px;color: #000000;font-size: 15px;font-weight: 600;height: 30px;">
					<view class="go-item" >
						去
					</view>
					<text>{{planInfo.dateDesc}}</text>
						<text style="margin: 0 8px;">{{planInfo.dateDescWeek}} {{planInfo.dpTime}}</text>
						<text v-if="planInfo.planType==1||planInfo.planType==3">发车</text>
						<text v-else>前乘车</text>
						<!--#ifdef MP-->
					<!-- 	<navigator style="margin-left: auto;margin-right: 8px;font-size: 14px;font-weight: 400;color: #1f73d9;" :url="'/pages/bus/line_map/index?line_id='+planInfo.line_id+'&plan_id='+planId">							
							<view class="row-center" >
								<text class="iconfont icon-gongjiaozhanpai" ></text>								
								<text>途经站点</text>
							</view>
						</navigator> -->
						<!--#endif-->
					</view>
					<view class="row-center skeleton-rect" style="margin: 0 12px;font-size: 16px;font-weight: 600;">
						<view style="max-width: 150px" class="line-ellipsis">{{planInfo.origin}}</view>
						<text class="iconfont iconchufadaodaxiao" style="margin: 0 5px;"></text>
						<view style="max-width: 150px" class="line-ellipsis">{{planInfo.destination}}</view>
					</view>
			</view>
			<!-- 去程 -->
			<!-- 返程 -->
			<view  v-if="planInfo&&planInfo.isReturnTrip"  class="skeleton-rect">
				<view class="row-center" style="margin: 10px 0 0 12px;color: #000000;font-size: 15px;font-weight: 600;height: 30px;">
					<view class="back-item">
						返
					</view>
					<text>{{planInfo.returnDate}}</text>
						<text style="margin: 0 8px;">{{planInfo.returnDateWeek}} {{planInfo.returnDateDp}}</text>
						<text>发车</text>
					<!-- 	<view class="row-center" style="margin-left: auto;margin-right: 8px;font-size: 10px;font-weight: 400;color: #ff5303;">
							<text class="iconfont icontongzhan" ></text>
							
							<text>途经站点</text>
						</view> -->
					</view>
					<view class="row-center skeleton-rect" style="margin: 0 12px;font-size: 16px;font-weight: 600;">
						<view style="max-width: 150px" class="line-ellipsis">{{planInfo.destination}}</view>
						<text class="iconfont iconchufadaodaxiao" style="margin: 0 5px;"></text>
						<view style="max-width: 150px" class="line-ellipsis">{{planInfo.origin}}</view>
					</view>
			</view>
			<!-- 返程 -->
			
			<!-- 去程 -->
			<view v-if="planInfo&&planInfo.isReturnTrip==0" class="u-skeleton-fillet">
				<view class="row-center skeleton-rect" style="margin: 10px 0 0 12px;color: #000000;font-size: 15px;font-weight: 600;height: 30px;">
					<!-- <view class="go-item" >
						去
					</view> -->
					<text>{{planInfo.dateDesc}}</text>
					<text style="margin: 0 8px;">{{planInfo.dateDescWeek}} {{planInfo.dpTime}}</text>
					<text v-if="planInfo.planType==1||planInfo.planType==3">发车</text>
					<text v-else>前乘车</text>
					<!--#ifdef MP-->
				<!-- 	<navigator  style="margin-left: auto;margin-right: 8px;font-size: 14px;font-weight: 400;color: #1f73d9;" :url="'/pages/bus/line_map/index?line_id='+planInfo.line_id+'&plan_id='+planId">
						<view class="row-center">
							<text class="iconfont icontongzhan" ></text>
							
							<text>途经站点</text>
						</view>
					</navigator> -->
					<!--#endif-->
				</view>
				<view class="row-center skeleton-rect" style="margin: 0 12px;font-size: 16px;font-weight: 600;">
					<view style="max-width: 150px" class="line-ellipsis">{{planInfo.origin}}</view>
					<text class="iconfont iconchufadaodaxiao" style="margin: 0 5px;"></text>
					<view style="max-width: 150px" class="line-ellipsis">{{planInfo.destination}}</view>
				</view>
			</view>
			<!-- 去程 -->
			
			<view v-if="planInfo&&planInfo.planType==3&&planInfo.isMust==0" class="row-center skeleton-rect" style="margin: 5px 12px;color: #b9b9b9;">
				如预约失败，系统自动全额退款
			</view>
			<view v-else-if="planInfo&&planInfo.planType==3&&planInfo.isMust==1" class="row-center skeleton-rect" style="margin: 5px 12px;color: #b9b9b9;">
				已众筹拼车成功，发车前{{planInfo.line.aheadRefundTime}}小时不允许退票
			</view>
			<!-- ahead_refund_time -->
			<view v-else class="row-center skeleton-rect" style="margin: 5px 12px;color: #b9b9b9;">
				发车前{{planInfo.line?planInfo.line.aheadRefundTime:''}}小时不允许在线退票
			</view>
			<view class="row-center skeleton-rect" style="justify-content: space-around;height: 40px;background-color: #d8f3ff;border-radius: 0 0 5px 5px;font-size: 12px;color: #007AFF;">
				<view  class="" style="position: relative;">
					<view v-if="opacity1"  @click="opacity1=false" class="display-flex-column" style="align-items: center;position: absolute;bottom: 20px;width: 100px;">
						<view class="opcity-bg">点击查看实景图</view>
						<view class="" style="border-left: 2px solid #1b1b1b;height: 10px;opacity: 0.5;"></view>
						<view class="" style="width: 4px;height: 4px;border-radius: 50%;background-color: #1b1b1b;opacity: 0.5;"></view>
					</view>
					<view @click="showNeedModel(0)" class="row-center" style=" padding: 0 8px;height: 23px;border-radius:25px;border:1px solid #9accf9">
						
						<text>途经站点</text>
						<text class="iconfont icon-xiangxia" style=";"></text>
					</view>
				</view>
				<view  @click="showNeedModel(1)" class="row-center" style="padding: 0 8px;height: 23px;border-radius:25px;border:1px solid #9accf9">
					<text>预订须知</text>
					<text class="iconfont icon-xiangxia" style=";"></text>
				</view>
				<view  @click="showNeedModel(2)" class="row-center" style=" padding: 0 8px;height: 23px;border-radius:25px;border:1px solid #9accf9">
					<text>退改须知</text>
					<text class="iconfont icon-xiangxia" style=";"></text>
				</view>
				<!-- <view  @click="goPlanDetail()" class="row-center" style=" padding: 0 8px;height: 23px;border-radius:25px;border:1px solid #9accf9">
					<text>班次详情</text>
				</view> -->
			</view>  
		</view>
		
		<view class="column u-skeleton skeleton-rect" style="background-color: #FFFFFF;width: 95%; margin: 10px;border-radius: 5px;">
			<view class="" style="margin: 10px;">
				<text style="color: #000000;font-size: 16px;">选择上下车点</text>
			</view>
			<view class="display-flex-column">
				
				<view class="row-center skeleton-rect" style="height: 44px;">
					<view class="station_dot station_dot_start">
					</view>
					<view class="od-item" style="width: 100%;">
						<picker @change="selctOnStop" :value="on_stop_index" :range="on_stop_arr" range-key="stopName">
							<view v-if="on_stop_name" class="uni-input">{{on_stop_arr[on_stop_index].stopName}}</view>
							<view v-else class="" style="color: #c9c9c9;">请选择上车点	</view>
						</picker>
					</view>
					<view class="iconfont icon-jinrujiantou" style="margin-left: auto;margin-right: 5px;color: #9e9e9e;"></view>
				</view>
				<view class="separation-line" style="margin-left:32px"></view>
				
				<view class="row-center" style="height: 44px;" >
					<view class="station_dot station_dot_end">
					</view>
					<view class="od-item" style="width: 100%">
						<picker @change="selctOffStop" :value="off_stop_index" :range="off_stop_arr" range-key="stopName">
							<view v-if="off_stop_name" class="uni-input">{{off_stop_arr[off_stop_index].stopName}}</view>
							<view v-else class="" style="color: #c9c9c9;">请选择下车点	</view>
						</picker>
					</view>
					<view class="iconfont icon-jinrujiantou" style="margin-left: auto;margin-right: 5px;color: #9e9e9e;"></view>
				</view>
			</view>
			 
		</view>
		
		<!-- 乘客  需要实名认证-->
		<view v-if="planInfo&&planInfo.isPassenger" class="column u-skeleton skeleton-rect" style="background-color: #FFFFFF;width: 95%; margin: 10px;border-radius: 5px;">
			<view class="" style="margin: 10px;">
				<text style="color: #000000;font-size: 16px;">乘客</text> <text style="margin-left: 5px;font-size: 14px;color: #919191;">(每单限购{{planInfo.perBuyNum}}张)</text>
			</view>
			<view @click.stop="passengerShow=true" v-if="passengerList&&!passengerList.length" class="" style="border-radius: 5px;height: 35px;line-height: 35px;color: #FFFFFF;margin: 10px;background-color: #007AFF;text-align: center;">
				<view>
					<text class="iconfont icon-jia-yuankuang" style="margin-right: 5px;"></text>
				    <text>添加乘客</text>
				</view>
			</view>
			<view v-else  style="display: flex;flex-flow: wrap;margin: 0 12px;">
				<view @click="selectPassenger(index)"  :class="item.check?'in-active':'no-active'" v-for="(item,index) in passengerList" :key="item.id" style="">
					<view style="max-width: 100px;;" class="text-ellipsis">{{item.name}}</view>
					<view v-if="item.check" class="gou">
						<text class="iconfont icon-dui" style="font-size: 10px;color: #FFFFFF;"></text>
					</view>
					<text style="display: none;">{{flag}}</text>
				</view>
				

				<view @click="passengerShow=true" class="no-active" style="">
					更多<text class="iconfont icon-jinrujiantou" style="font-size: 12px;"></text>
				</view>
			</view>
			
			
			<view class=" skeleton-rect">
				
				<view v-if="item.check" class="" v-for="(item, index) in passengerList" :key=index>
					<view class="row-center" style="margin: 5px 12px;">
						<text @click="delectPassenger(index)" class="iconfont icon-shanchu" style="color: #ff0004;margin: 0 10px 0 5px;"></text>
						<text style="font-size: 14px;color: #000000;font-weight: 600;width: 90px;">{{item.name}}</text>
						<text style="color: #909090;font-size: 12px;margin: 0 5px;margin-right: 32px;">{{item.idCard.substr(0,4) + "**********" + item.idCard.substr(14),}}</text>
						<view class="" style="width: 80px;height: 20px;line-height: 20px;font-size: 12px;background-color: #e4f4ff;color: #b5cdff;text-align: center;margin-right: 10px;">
							{{item.type==1?'成人票':'儿童票'}}
						</view>
						<text  @click="editPassenger(item)"  class="iconfont icon-bianji2" style="margin-left: auto;font-size: 18px;color: #007AFF;"></text>
					
					</view>
					<view v-if="index!=(passengerList.length-1)" class="separation-line" style="margin: 12px;">
						
					</view>
				</view>
							
				
			</view>
		   
	<!-- 	   <view @click="childShow=true" class="row-center"  style="margin: 5px 12px;">
			  <text style="color: #626262;margin-right: 8px;font-size: 12px;">免费携童</text>
			  <text style="color: #a2a2a2;font-size: 12px;">怀抱婴儿可免费申请，无座位</text>
			  <text class="iconfont icon-jinrujiantou" style="color: #007AFF;margin-left: auto;"></text>
		   </view> -->
		   <view class="dashed_line"> </view>
		   <view class="row-center"  style="margin: 5px 12px;">
			  <text style="color: #000000;margin-right: 12px;">联系电话</text>
			  <text style="color: #000000;">{{userInfo?userInfo.phone:''}}</text>
		   </view>
		  <view class='item skeleton-rect' v-if="planInfo.isGrade">
				<view style="margin-left:10px">年级+班级</view>
				<view class="placeholder-textarea" style="margin-bottom: 10px;">
					<textarea ref='textarea' @input='bindHideKeyboard' name="mark" :value="grade">
					</textarea>
					<view class="placeholder" @click="clickTextArea" v-show="!grade">
						请填写"班级"+"年级"
					</view>
				</view>
		   </view>
		</view>
		<!-- 乘客  需要实名认证-->
		

		<!-- 乘客  不需要实名认证-->
		<view v-else class="column skeleton-rect " style="background-color: #FFFFFF;width: 95%; margin: 10px;border-radius: 5px;">
			<view class="" style="margin: 10px;">
				<text style="color: #000000;font-size: 16px;">乘客</text> <text style="margin-left: 5px;font-size: 14px;color: #919191;">(每单限购{{planInfo.perBuyNum}}张)</text>
			</view>
		   <view class="row-center">
			<image src="../../../static/images/bus/chenke.png"  style="width: 25px;height: 25px;margin: 5px 0 15px 12px;"></image>
			<view class="display-flex-column" style="margin-left: 15px;">
				<text style="font-weight: 600;">乘车人数</text>
				<text style="font-size: 12px;color: #a2a2a2;">无需实名登记</text>
			</view>
			
			<view class="cart acea-row row-between-wrappe skeleton-rect" style="margin-left: auto;margin-right: 12px;">
				<view class="carnum acea-row row-left">
					<view class="item reduce" :class="peopleNum <= 1 ? 'on' : ''"
						@click="CartNumDes">
						-
					</view>
					<view class='item num'>
						<input type="number" v-model="peopleNum"
							data-name="productSelect.cart_num"
							@input="bindCode(peopleNum)" maxlength="3"></input>
					</view>
					<view class="item plus"  @click="CartNumAdd">
						+
					</view>
				</view>
			</view>

		   </view>
		   <view class="dashed_line"> </view>
		   <view class="row-center skeleton-rect"  style="margin: 5px 12px;">
			  <text style="color: #000000;margin-right: 12px;">联系电话</text>
					  <text style="color: #000000;">{{userInfo?userInfo.phone:''}}</text>
		   </view>
		</view>
		<!-- 乘客  不需要实名认证-->
		
		<!-- 月票 -->
	<!-- 		<view  style="background:#ffffff;width: 95%; margin: 10px;border-radius: 5px;padding-bottom: 10px;">
			<view   class="row-center u-skeleton u-skeleton-fillet">
				<image src="https://m.gybsky.cn/uploads/attach/2022/04/20220414/838eb09c300caba8fca25f6d768c67cd.png" mode="" style="width:90rpx;height:44rpx; margin: 10px;"></image>
				<text style="margin-left: auto;color: #3d3d3d;">切换月票购买</text>
				<u-switch  style="margin: 0 12px;" v-model="showMonthTicket" @change="monthlySelect"></u-switch>
				
			</view>
			<view class="month-bg display-flex display-flex-flex-wrap">
				<view class="month-item">
					04月1号
				</view>
			</view>
		</view> -->
		<!-- 月票 -->
		
		<view class='wrapper borRadius14 skeleton-rect'>
			<view class='item'>
				<view>支付方式</view>
				<view class='list'>
					<view class='payItem acea-row row-middle' :class='active==index ?"on":""'
						@tap='payItem(index)' v-for="(item,index) in cartArr" :key='index'
						v-if="item.payStatus==1">
						<view class='name acea-row row-center-wrapper'>
							<view class='iconfont animated'
								:class='(item.icon) + " " + (animated==true&&active==index ?"bounceIn":"")'>
							</view>
							{{item.name}}
						</view>
						<view class='tip'>{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 优惠券 -->
		<view  @click="couponTap" class="row-center skeleton-rect " style="background-image: linear-gradient(to right,#ffffff, #fffff0);width: 95%; margin: 10px;border-radius: 5px;">
			<image src="../../../static/images/bus/youhuiquan.png" style="width: 25px;height: 25px; margin: 10px;"></image>
			<text style="font-size: 16px;font-weight: 500;color: #000000;">优惠券</text>
			<text style="margin-left: auto;color: #3d3d3d;">{{couponTitle?couponTitle:'请选择'}}</text>
			<text class="iconfont icon-jinrujiantou" style="margin: 0 12px;"></text>
		</view>
		
	<!-- 	<view class='item acea-row row-between-wrapper' @tap='couponTap' >
			<view>优惠券</view>
			<view class='discount'>{{couponTitle}}
				<text class='iconfont icon-jiantou'></text>
			</view>
		</view> -->
		<!-- 优惠券 -->
		

		
		
		<view class="footer skeleton-rect ">
			<view class="" style="color: #ff6326;">
				￥<text style="font-size: 22px;">{{totalPrice}}</text>
			</view>
			<view @click="orderDetailShow=!orderDetailShow" class="row-center " style="margin-left: auto;margin-right: 15px;color: #6b6b6b;">
				<view>明细</view>
				<text class="iconfont icon-xiangshangshouqi"></text>
			</view>
			<view @click="goPay()" class="pay-button" >
				去支付
			</view>
		</view>
					 
		</view>
		<apopup :show="passengerShow"  @close="passengerShow=false" border-radius="14" height="650" :closeable="true" z-index='10'>
			<view style="margin-top: 10px;margin-left: 10px;">
				<view class="" style="font-weight: 600;font-size: 18px;">
					选择乘客
				</view>
				<navigator url="/pages/add_passenger/index">
					<view class="" style="border-radius: 20px;height: 35px;line-height: 35px;width: 90%;color: #2979ff;margin: 15px;background-color: #e5f9ff;text-align: center;">
						<text class="iconfont icon-jia-yuankuang" style="margin-right: 5px;"></text> 
						<text >新增乘客</text>
					</view>
				</navigator>
				
				<scroll-view class="" scroll-y="true" style="height: 400rpx;">
					
					<view  class="" v-for="(item, index) in passengerList" :key="index">
						<view class="row-center" style="margin: 5px 12px;">
							<text @click="editPassenger(item)"  class="iconfont icon-bianji2 " style="font-size: 25px;color: #007AFF;margin-right: 15px;"></text>
							<text style="font-size: 14px;color: #000000;font-weight: 600;width: 70px;">{{item.name}}</text>
							<text style="color: #909090;font-size: 12px;margin: 0 5px;margin-right: 25px;">{{item.idCard.substr(0,4) + "**********" + item.idCard.substr(14),}}</text>
							<view class="" style="width: 40px;height: 20px;background-color: #e4f4ff;color: #b5cdff;text-align: center;margin-right: 10px;">
								{{item.type==1?'成人':'儿童'}}
							</view>
							<view @click="selectPassenger(index)"  v-if="item.check" class="iconfont icon-duigouxiao" style="margin-left: 12px;font-size: 25px;color: #007AFF;">
								
							</view>
							<view @click="selectPassenger(index)"  v-else class="iconfont  icon-weixuanzhongyuanquan" style="margin-left: 12px;font-size: 25px;color: #007AFF;">
								
							</view>
						
						</view>
						<view v-if="index!=(passengerList.length-1)" class="separation-line" style="margin: 12px;">
							
						</view>
					</view>
								
					
				</scroll-view>
				
			</view>
		</apopup>	
		
		<!-- 优惠券弹窗 -->
		<apopup :show="couponShow" @close="couponShow=false"  border-radius="20" height="500" :closeable="true">
			<view class="content" style="background: #f7f7f7;height: 100%;">
				<scroll-view scroll-y="true" v-if="couponList.length">
					<view style="padding: 20px 0;">
						<view v-for="(item,index) in couponList" :key="index">
							<view class="jingdong">
								<view class="left">
									<view class="sum">
										￥
										<text class="num">{{item.couponPrice}}</text>
									</view>
										<view class="type" v-if="item.useMinPrice > 0">满{{item.useMinPrice}}元可用</view>
									<view class="type" v-else>无门槛券</view>
								</view>
								<view class="right" style="flex:1">
									<view class="top">
										<view class="title">
											<text class="tag">现金券</text>
											<text>{{item.couponTitle}}</text>
										</view>
										<view class="bottom">
											<view class="date u-line-1" v-if="item.couponTime">领取后{{item.couponTime}}天内可用</view>
											<view class="date u-line-1" v-else>{{ item.startTime ? item.startTime + "-" : ""}}{{ item.endTime }}</view>
											<view style="margin-left: auto;" class="immediate-use" v-if="!item.isUse" @click="useCoupon(item.id, item)">立即使用</view>
											<view  style="margin-left: auto;" class="on-use" v-else @click="useCoupon(item.id,item)">不使用</view>
										</view>
									</view>
								</view>
							</view>
		
						</view>
					</view>
				</scroll-view>
				<view v-else style="font-size: 20px;color: #606266;margin-top: 100px;">暂无优惠券</view>
			</view>
		</apopup>
		<!-- 优惠券弹窗 -->
		<!-- 须知 -->
		<apopup :show="needShow" @close="needShow=false"  border-radius="14" height="800">
			<view style="margin-top: 10px;">


				<!-- <view>
				    <u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
					 swiperWidth="300"  bar-height="6" :show-bar="false"  active-color="#2979ff">
					</u-tabs-swiper>
				</view> -->
				<swiper  :current="swiperCurrent" style="height: 400px;">
					<swiper-item class="swiper-item" style="margin-top: 10px;">
						<scroll-view v-if="planInfo" scroll-y="true" style="height:350px;padding-bottom: 30px;">
							<view  @click="lookStation(item)" v-for="(item,index) in planInfo.lineStations" :key="index" class="display-flex-column" style="align-items: flex-start;">
								<view v-if="index==0&&opacity2" @click="opacity2=false" class="display-flex-column" style="align-items: center;margin-left: 25px;">
									<view class="opcity-bg">点击查看实景图</view>
									<view class="" style="border-left: 2px solid #1b1b1b;height: 10px;opacity: 0.5;"></view>
									<view class="" style="width: 4px;height: 4px;border-radius: 50%;background-color: #1b1b1b;opacity: 0.5;"></view>
								</view>
								<view class="display-flex-column" style="margin-left: 10%;">
									<view class="row-center" style="justify-content: center;">
										<view class="dot" :style="(index==planInfo.lineStations.length-1)?'background-color: #ff8843;':'background-color: #007AFF;'"></view>
										<text>{{item.stopName}}</text>
									</view>
									<view v-if="index!=planInfo.lineStations.length-1" class="shu-line3" style="margin-left: 12px;"></view>
								</view>
									
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item class="swiper-item" >
						<view class="" style="padding: 12px;">
							<scroll-view scroll-y="true" style="height:350px;padding-bottom: 30px;">
								<view style="font-weight: 600;margin-bottom: 10px;">
									预订须知
								</view>
								<view class="row" style="margin-bottom: 10px;">
									<text class="dot" style="background-color: #3a3a3a;width: 10rpx;height: 10rpx;margin-top: 8px;">					
									</text>
									<view class="" style="width: 90%;font-size: 14px;">
										遵义市内品质公交产品，其本质为公交服务，仅提供交通运输服务，不提供行李保管服务。贵重物品请乘客务必不要放在行李舱并且随身携带保管，如果行李或贵重物品遗失或被盗平台不承担任何责任和损失。
									</view>
								</view>
								<view class="row" style="margin-bottom: 10px;">
									<text class="dot" style="background-color: #3a3a3a;width: 10rpx;height: 10rpx;margin-top: 8px;">					
									</text>
									<view class="" style="width: 90%;font-size: 14px;">
									  一人一座旅游巴士（品质公交线路除外），不可超载不可站立乘车。不设儿童票，仅1岁以内的怀抱婴儿可免票，由于同辆车内怀抱婴儿数不能超过2名，所以必须提前致电客服报备登记，如因乘客未向客服提前报备登记导致无法乘车的，平台不承担任何责任和损失。
									</view>
								</view>
								<view class="row" style="margin-bottom: 10px;">
									<text class="dot" style="background-color: #3a3a3a;width: 10rpx;height: 10rpx;margin-top: 8px;">					
									</text>
									<view class="" style="width: 90%;font-size: 14px;">
										遵义市内品质公交产品，其本质为公交服务，所以车不等人，请乘客务必提前到达上车点。当发生包含但不仅限于：乘客个人原因迟到、等错站点、车未到站提前离开、更换其他出行方式、买错日期等原因未乘坐车的，不予退款或改签。
									</view>
								</view>
								<view class="row" style="margin-bottom: 10px;">
									<text class="dot" style="background-color: #3a3a3a;width: 10rpx;height: 10rpx;margin-top: 8px;">					
									</text>
									<view class="" style="width: 90%;font-size: 14px;">
										非公益性公交产品不享受任何证件优惠购票。
									</view>
								</view>
														
							</scroll-view>
						</view>
					</swiper-item>
					<swiper-item class="swiper-item" >
						<view class="" style="padding: 12px;">
								<scroll-view scroll-y="true" style="height:350px;padding-bottom: 30px;">
									<view style="font-weight: 600;margin-bottom: 10px;">
										退改须知
									</view>
									<!-- <view class="row" style="margin-bottom: 10px;">
										<text class="dot" style="background-color: #3a3a3a;width: 10rpx;height: 10rpx;margin-top: 8px;">					
										</text>
										<view class="" style="width: 90%;font-size: 14px;">
											申请退款时间距发车时间大于12小时的，乘客可自行在“待出行”或“全部订单”进行退款；申请退款时间距发车时间不足12小时的，不予退款或改签。
										</view>
									</view> -->
									<view class="row" style="margin-bottom: 10px;">
										<text class="dot" style="background-color: #3a3a3a;width: 10rpx;height: 10rpx;margin-top: 8px;">					
										</text>
										<view class="" style="width: 90%;font-size: 14px;">
											当发生包含但不仅限于：乘客个人原因迟到、等错站点、车未到站提前离开、更换其他出行方式、买错日期等原因未乘坐车的，不予退款或改签。
										</view>
									</view>
									<view class="row" style="margin-bottom: 10px;">
										<text class="dot" style="background-color: #3a3a3a;width: 10rpx;height: 10rpx;margin-top: 8px;">					
										</text>
										<view class="" style="width: 90%;font-size: 14px;">
										     由于不可抗力因素导致车辆、线路取消或停运的，可全额退票。
										</view>
									</view>
									<view class="row" style="margin-bottom: 10px;">
										<text class="dot" style="background-color: #3a3a3a;width: 10rpx;height: 10rpx;margin-top: 8px;">					
										</text>
										<view class="" style="width: 90%;font-size: 14px;">
											由于车辆运营问题（提前发车、私自该线、甩站等）导致乘客未坐到车的，经核实后可全额退票。
										</view>
									</view>
									<view class="row" style="margin-bottom: 10px;">
										<text class="dot" style="background-color: #3a3a3a;width: 10rpx;height: 10rpx;margin-top: 8px;">					
										</text>
										<view class="" style="width: 90%;font-size: 14px;">
											使用优惠券的车辆进行退款时，优惠券不予退回。
										</view>
									</view>

									<!-- <view class="row" style="margin-bottom: 10px;">
										<text class="dot" style="background-color: #3a3a3a;width: 10rpx;height: 10rpx;margin-top: 8px;">					
										</text>
										<view class="" style="width: 90%;font-size: 14px;">
											预约班次：当预约人数未达到规定人数即为发车失败，系统会自动为您取消订单(前晚22:00进行退款)，用户也可自行申请退款。
										</view>
									</view>
									<view class="row" style="margin-bottom: 10px;">
										<text class="dot" style="background-color: #3a3a3a;width: 10rpx;height: 10rpx;margin-top: 8px;">					
										</text>
										<view class="" style="width: 90%;font-size: 14px;">
											预约班次：当预约人数达到规定人数即为发车成功，用户自行退票将收取一定手续费(退票规则如上)。
										</view>
									</view>	 -->					
								</scroll-view>
							</view>
						
					</swiper-item>
				</swiper>
			</view>
		</apopup>
		<!-- 须知 -->
        <!-- 明细弹窗 -->
		<apopup v-if="planInfo" :show="orderDetailShow"  @close="orderDetailShow=false"  :safe-area-inset-bottom="true" border-radius="5" height="500" z-index="1" >
			<view class="display-flex-column" style="background: #f7f7f7;height: 100%;">
				<view class="row-center" style="margin: 15px 12px;">
					<text class="dot" style=" background: #bcc0c8;"></text>
					<text style="margin: 0 12px;font-size: 16px;color: #000000;font-weight: 600;">成人票</text>
					<text style="margin-left: auto;margin-right: 12px;font-weight: 600;">￥{{planInfo.normalPrice}} x {{adultTicketNum}} 张</text>
				</view>
				<view class="separation-line" style="margin: 0 12px;"></view>
				<view class="row-center" style="margin: 15px 12px;">
					<text class="dot" style=" background: #bcc0c8;"></text>
					<text style="margin: 0 12px;font-size: 16px;color: #000000;font-weight: 600;">儿童票</text>
					<text v-if="planInfo.isPassenger" style="margin-left: auto;margin-right: 12px;font-weight: 600;">￥{{planInfo.normalPrice*0.5}} x {{childTicketNum}} 张</text>
					<text v-else style="color: #9d9d9d;margin-left: auto;margin-right: 12px">该班次不支持购买儿童票</text>
				</view>
				<view class="separation-line" style="margin: 0 12px;"></view>
				<view class="row-center" style="margin: 15px 12px;">
					<text class="dot" style=" background: #bcc0c8;"></text>
					<text style="margin: 0 12px;font-size: 16px;color: #000000;font-weight: 600;"
					>优惠券<text v-if="coupon_title" style="font-size: 10px;color: #b1b1b1;font-weight: 300;">（{{coupon_title}}）</text>
					</text>
					<text style="margin-left: auto;margin-right: 12px;font-weight: 600;">￥{{couponMoney}} </text>
				</view>
			</view>
		</apopup>
		<!-- 明细弹窗 -->	
		<!-- <apopup :show="childShow"  @close="childShow=false" width="600" type="center" border-radius="8" >
			<view class="row-center">
				<view class="display-flex-column" style="align-items: center; margin: 35px 0 20px 0;width: 50%;">
					<image src="https://m.gybsky.cn/uploads/attach/2022/04/20220414/4ef9e7be21a925341d9800d2ba16f883.png" style="width: 70px;height:70px;margin-bottom: 30px;" mode=""></image>
					<view class="" style="font-size: 16px;color: #000000;">
						半价，有座
					</view>
					<view class="" style="color: #949494;font-size: 11px;margin: 8px 0 15px 0;">
						1.2米以下
					</view>
					<view @click="(passengerShow=true ,childShow=false)" style="line-height: 25px;height: 25px;border-radius: 4px;background-color: #007AFF;text-align: center;color: #FFFFFF;padding: 0 8px;">
						购买
					</view>
				</view>
				<view class="display-flex-column" style="align-items: center; margin: 35px 0 20px 0;width: 50%;">
					<image src="https://m.gybsky.cn/uploads/attach/2022/04/20220414/0db597c94c28afa93be02283861db57d.png" style="width: 65px;height: 65px;margin-bottom: 30px;" mode=""></image>
					<view class=""style="font-size: 16px;color: #000000;">
						免费，无座
					</view>
					<view class=""  style="color: #949494;font-size: 11px;margin: 8px 0 15px 0;">
						怀抱婴儿
					</view>
					<view @click="(applyChildShow=true,childShow=false)" style="line-height: 25px;height: 25px;border-radius: 4px;background-color: #007AFF;text-align: center;color: #FFFFFF;padding: 0 8px;">
						申请
					</view>
				</view>
			</view>
		</apopup>
	 -->
		<apopup :show="rollShow" @close="rollShow=false" width="600"  :mask-close-able="false" border-radius="8" >
			<view style="margin: 15px 0;text-align: center;font-size: 16px;color: #000000;font-weight: 600;">
				流水班须知
			</view>
			<view class="" style="padding: 0 15px;">
				<view class="row-center" style="margin: 15px; align-items: flex-start;">
					<text>1、</text><text>此班次是流水班次，发车形式为滚动发车</text>
				</view>
				<view class="row-center" style="margin: 15px; align-items: flex-start;">
					<text>2、</text><text>请前往线路起始点乘车，以防误车</text>
				</view>
				<view class="row-center" style="margin:15px; align-items: flex-start;">
					<text>3、</text><text>禁止携带宠物上车</text>
				</view>
				<view class="row-center" style="margin: 15px; align-items: flex-start;">
					<text>4、</text><text>禁止携带易燃易爆等违禁物品上车</text>
				</view>
			</view>
			<view class="popup-button"  @click="rollShow=false">
				我知道了
			</view>
		</apopup>
	
		<apopup :show="bookingShow" @close="bookingShow=false" width="600" mode="center" :mask-close-able="false" border-radius="8" >
			<view style="margin: 15px 0;text-align: center;font-size: 16px;color: #000000;font-weight: 600;">
				预约班通知
			</view>
			<view class="" style="padding: 0 15px;">
				<view class="row-center" style="margin: 15px; align-items: flex-start;">
					<text>1、</text><text>此班次为预约班次，需预约人数达到规定人数（通常15人）视为发车成功</text>
				</view>
				<view class="row-center" style="margin: 15px; align-items: flex-start;">
					<text>2、</text><text>当预约人数未达到规定人数即为发车失败，系统会自动为您取消订单</text>
				</view>
				<view class="row-center" style="margin: 15px; align-items: flex-start;">
					<text>3、</text><text>当发车成功时，系统会发送预约成功短信</text>
				</view>
				<view class="row-center" style="margin:15px; align-items: flex-start;">
					<text>4、</text><text>禁止携带宠物上车</text>
				</view>
				<view class="row-center" style="margin: 15px; align-items: flex-start;">
					<text>5、</text><text>禁止携带易燃易爆等违禁物品上车</text>
				</view>
			</view>
			<view class="popup-button"  @click="bookingShow=false">
				我知道了
			</view>
		</apopup>
		
		
		<couponListWindow :coupon='coupon' @ChangCouponsClone="ChangCouponsClone" :openType='openType' @ChangCoupons="ChangCoupons" :orderShow="orderShow"></couponListWindow>
		
		<payment :payMode="cartArr" :pay_close="pay_close" :isCall="true" :totalPrice="totalPrice.toString()"
			@changePayType="changePayType" @onChangeFun="onChangeFun"></payment>
	
		
		
	</view>
</template>


<script>
	import {apopup} from '@/components/a-popup/index.vue'
	import couponListWindow from '@/components/couponListWindow';

    import {getLinePlanDetail} from '@/api/bus'
	import {getPassengerList,getUserInfo} from '@/api/user'
	import {getCoupons} from '@/api/api'
	import {loadPreOrderBusApi,orderBusCreate,orderBusPay,
	 wxPayOrderBusResult,getCouponsOrderBusPrice, cancelByOrderId, orderBusCancel} from '@/api/order'
	import payment from '@/components/payment';
	import {
			mapGetters
		} from "vuex";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
			openPaySubscribe
		} from '@/utils/SubscribeMessage.js';
	var util = require('@/common/js/util.js');
	
	var _formatFloat = util.formatFloat
	var _add = util.add
	var _mul = util.mul
    let app =  getApp()
	export default {
		components:{
			apopup,payment,couponListWindow
		},
		computed: mapGetters(['isLogin','systemPlatform']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.getConfirm();
					}
				},
				deep: true
			}
		},
		data() {
			return {
				showSkeleton: true, //骨架屏显示隐藏
				isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
				orderShow: 'orderShow', //下单页面使用优惠券组件不展示tab切换页
				openType: 1, //优惠券打开方式 1=使用
				couponTitle: '请选择', //优惠券
				coupon: {
					coupon: false,
					list: [],
					statusTile: '立即使用'
				}, //优惠券组件
				theme:app.globalData.theme,
				showMonthTicket: false,
				preOrderNo: '', //预下单订单号
				from:'',
				animated: false,
				childNum:0,
				applyChildShow:false,
				childShow:false,
				background:{background: 'rgba(0, 0, 0, 0.85)'},
				bookingShow:false,
				rollShow: false,
				isRefresh:false,
				disableFlag:false,
				orderDetailShow:false,
				planId: '',
				planInfo:'',
				loading: true, // 是否显示骨架屏组件
				needShow: false,
				passengerShow: false,
				list: [{
					name: '途经站点'
				}, {
					name: '预订须知'
				}, {
					name: '退改须知'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				passengerList:[],
				flag:0,
				couponShow: false,
				couponMoney: 0.00,
				currentCouponIndex: -1,
				couponList: [],
				coupon_id: 0,
				coupon_title: '',
				useIntegral: false, //是否使用积分
				integral: 0,
				userInfo: {},
				couponMoney: 0.00,
				totalPrice: 0,
				on_stop_arr:[],
				off_stop_arr:[],
				on_stop_id: '',
				off_stop_id: '',
				on_stop_name: '',
				off_stop_name: '',
				on_stop_index: 0,
				off_stop_index: 0,
				childTicketNum: 0,
				adultTicketNum:0,
				order_source: 1, //订单来源
				c_message: '', //用户留言
			
				peopleNum:1,
				currentStop: {},
				opacity1:true,
				opacity2:true,
				pay_close: false,
				payType: 'weixin', //支付方式
				//支付方式
				//支付方式
				cartArr: [
					// #ifdef MP-WEIXIN || APP-PLUS
					{
						"name": "微信支付",
						"icon": "icon-weixin2",
						value: 'weixin',
						title: '微信快捷支付',
						payStatus: 1,
					},
					// #endif
					// #ifdef MP-ALIPAY || APP-PLUS
					{
						"name": "支付宝支付",
						"icon": "icon-zhifubao",
						value: 'alipay',
						title: '支付宝快捷支付',
						payStatus: 1,
					},
					
					 // #endif
					{
						"name": "余额支付",
						"icon": "icon-yuezhifu",
						value: 'yue',
						title: '可用余额:',
						payStatus: 1,
					},
					
					
				],
				active: 0, //支付方式切换
				integralRatio: "0",
	            orderKey: "",
				invoice_func: false,
				invTitle: '不开发票',
				special_invoice: false,
				grade: '',//年级班级
				payChannel: 'routine',
			}
		},
		onLoad(option) {	
			setTimeout(() => {
				this.isNodes++;
			}, 100);
			this.preOrderNo = option.preOrderNo || 0;
			this.grade = uni.getStorageSync("grade_str")?uni.getStorageSync("grade_str"):''
			// // #ifdef H5
			// this.from = this.$wechat.isWeixin() ? 'weixin' : 'weixinh5'
			// // #endif
			// // #ifdef MP
			// this.from = 'routine'
			// // #endif
			// #ifdef H5
			this.payChannel = this.$wechat.isWeixin() ? 'public' : 'weixinh5';
			// #endif
			// #ifdef MP-WEIXIN
			this.payChannel = 'routine';
			this.navH = app.globalData.navHeight;
			// #endif
			// #ifdef MP-ALIPAY
			this.payChannel = 'routineAlipay';
			this.payType = 'alipay';
			this.navH = app.globalData.navHeight;
			// #endif
			
			// #ifdef APP-PLUS
			this.payChannel = this.systemPlatform === 'ios' ? 'weixinAppIos' : 'weixinAppAndroid';
			// #endif
			uni.setNavigationBarTitle({
			　　title:option.line_sn
			})
			// switch (option.plan_type){
			// 	case '2':
			// 	    this.rollShow = true 
			// 		break;
			// 	case '3':
			// 	    this.bookingShow = true
			// 		break;
			// 	default:
			// 		break;
			// }
			this.initRegularDetail(option.plan_id)
			this.planId = option.plan_id
			if(this.isLogin == true){	
				this.getConfirm();
			
			}
		},
		onReady() {
			
		},
		// onBackPress(){
		// },
		onShow() {
			if(this.isLogin == true){
				var that = this;
				var pages = getCurrentPages();
				var currPage = pages[pages.length - 1]; //当前页面
				// #ifdef MP
				let res = currPage.data.isRefresh;
				//#endif
				// #ifdef H5
				let res = currPage.isRefresh;
				//#endif
				// #ifdef  APP-PLUS
				let res = currPage.isRefresh;
				//#endif	
				if(res) {
					that.initPassengerList()
					that.isRefresh = false
				}
				that.initPassengerList()
				
				
				// this.getConfirm(this.planId);
			} else {
				toLogin()
			}
		},
		methods:{
			/**
			 * 处理点击优惠券后的事件
			 * 
			 */
			ChangCoupons: function(e) {
				// this.usableCoupon = e
				// this.coupon.coupon = false
				let index = e,
					list = this.coupon.list,
					couponTitle = '请选择',
					couponId = 0;
				for (let i = 0, len = list.length; i < len; i++) {
					if (i != index) {
						list[i].use_title = '';
						list[i].isUse = 0;
					}
				}
				if (list[index].isUse) {
					//不使用优惠券
					list[index].use_title = '';
					list[index].isUse = 0;
				} else {
					//使用优惠券
					list[index].use_title = '不使用';
					list[index].isUse = 1;
					couponTitle = list[index].name;
					couponId = list[index].id;
				}
				this.couponTitle = couponTitle;
				this.coupon_id = couponId;
				this.$set(this.coupon, 'coupon', false);
				this.$set(this.coupon, 'list', list);
				// this.computedPrice();
				this.computePrice()
			},
			
			ChangCouponsClone: function() {
				this.$set(this.coupon, 'coupon', false);
			},
			couponTap: function() {
				this.coupon.coupon = true;
				if(!this.coupon.list.length)this.getCouponList();
			},
			getCouponList: function() {
				getCouponsOrderBusPrice(this.preOrderNo).then(res => {
					this.$set(this.coupon, 'list', res.data);
					this.openType = 1;
				});
			},
			CartNumDes: function() {
				var that = this
				if(that.peopleNum <= 1){
					this.peopleNum = 1
					return
				}
				that.peopleNum--
				if(that.passengerList.length > 0){
					that.passengerList.forEach(function(res,index) {
						that.passengerList[index].check = false
					})
				}
				if(this.peopleNum > 0){
					this.computedPrice()
				}
			},
			bindCode: function(e) {
				var that = this
							
				if(!isNumber(e)){
					that.$set(that,"peopleNum",1)
					return
				}
				if(e > 0){
					this.peopleNum = e
					this.computedPrice()
				}
			},
			CartNumAdd: function() {
				if(this.peopleNum + 1 > this.planInfo.perBuyNum) return
				this.peopleNum++
				this.computePrice()
			},
			
			
			bindHideKeyboard: function(e) {
				this.grade = e.detail.value;
			},
			clickTextArea() {
				this.$refs.textarea.focus()
			},
			selctOnStop(e){
				this.on_stop_index = e.detail.value
				this.on_stop_id = this.on_stop_arr[e.detail.value].lineStopId
				this.on_stop_name = this.on_stop_arr[e.detail.value].stopName
				this.computePrice()
			
			},
			selctOffStop(e){
				this.off_stop_index = e.detail.value
				this.off_stop_id = this.off_stop_arr[ e.detail.value].lineStopId
				this.off_stop_name = this.off_stop_arr[ e.detail.value].stopName
				this.computePrice()
				
			},
			getLinePrice(){
				var priceList = this.planInfo.linePrice
				if(this.on_stop_id&&this.off_stop_id){
					return priceList.find((res)=>this.on_stop_id==res.onStopId&&this.off_stop_id==res.offStopId ).price
				} else {
					return 0;
				}
			},
			payClose: function() {
				this.pay_close = false;
			},
			
			//月票购买
			monthlySelect(status){
				var days = this.planInfo.buyDays
				var yu_flag = false
				if(!days){
					this.$util.Tips({title: '暂无月票购买'});
					this.showMonthTicket = false
					return;
				}
				days.forEach(el => {
					if(el.planType==2){
						yu_flag = true
					}
				})
				if(yu_flag){
					this.showMonthTicket = false
					uni.showModal({
						content:'月票日期含有预约班，不可购买月票'
					})
					return
				}
				
				uni.showLoading({
					title:'正在计算价格' 
				})
				
				uni.hideLoading()
				var that = this
				
			},
			payItem: function(e) {
				let that = this;
				let active = e;
				that.active = active;
				that.animated = true;
				that.payType = that.cartArr[active].value;
				// #ifdef H5
				if(that.payType == 'alipay' && this.$wechat.isWeixin() == true){
					that.payChannel = 'public';
				}else if(that.payType == 'alipay' && this.$wechat.isWeixin() == false){
					that.payChannel = 'weixinh5';
				}
				// #endif
				// #ifdef APP-PLUS
				if(that.payType == 'alipay'){
					that.payChannel = 'appAliPay';
				}
				// #endif
				// #ifdef MP-ALIPAY
				if(that.payType == 'alipay'){
					that.payChannel = 'routineAliPay';
				}
				// #endif
				//that.computedPrice();
				setTimeout(function() {
					that.car();
				}, 500);
			},
			car: function() {
				let that = this;
				that.animated = false;
			},
			goPay() {
				
				if (!(this.on_stop_id&&this.off_stop_id)) {
					return this.$util.Tips({title: '请先选择上下车点！'});
				} 
				if (this.planInfo.isGrade&&!this.grade)  return this.$util.Tips({
					title: '请填写学生年级和姓名'
				});
				// this.pay_close = true;
				
				this.SubOrder()
				
			},
			changePayType(type) {
				this.payType = type
				// this.computedPrice()
			},
			/**
			 * 事件回调
			 *
			 */
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				action && this[action] && this[action](value);
			},
			payCheck(type) {
				
				this.payType = type;
				this.SubOrder();
			},
			SubOrder: function(e) {
				let that = this,
					data = {};
	            var isSelectPassenger=false;
				var passList = [];
				var passNum = 0;
				if(this.totalPrice <=0) return that.$util.Tips({
					title: '支付金额不正确'
				});
				if(that.planInfo.isPassenger){
					that.passengerList.forEach(function(item){
						if(item.check){
							isSelectPassenger = true
							passNum++
							passList.push(item)
						}
					})
				}
				// that.planInfo.line_stations.forEach(function(item,index){
				// 	if(index==0){
				// 		that.on_stop_id = item.line_stop_id
				// 	}
				// 	if(index==(that.planInfo.line_stations.length -1)){
				// 		that.off_stop_id = item.line_stop_id
				// 	}
				// })
				if (!that.payType) return that.$util.Tips({
					title: '请选择支付方式'
				});
				
				if (!isSelectPassenger&&that.planInfo.isPassenger) {
					return that.$util.Tips({title: '请选择乘客'});
				}  else if(that.planInfo.stock< passNum && that.planInfo.isPassenger){
					return that.$util.Tips({title: '库存不足'});
				}
				else if(that.planInfo.stock< that.peopleNum && !that.planInfo.isPassenger){
					return that.$util.Tips({title: '库存不足'});
				}
		
		        uni.setStorageSync("grade_str",that.grade)
		        
				data = {
					preOrderNo: that.preOrderNo,
					planId: that.planInfo.planId,
					lineId: that.planInfo.lineId,
					formId: '',		
					couponId: that.coupon_id,
					useIntegral: that.useIntegral,
					payType: that.payType,
					// 'from': that.from,
					payChannel: that.payChannel,
					passengerList: passList,
					onStopId: that.on_stop_id,
					offStopId: that.off_stop_id,
					peopleNum: passList.length>0? passList.length: that.peopleNum,
					childNum: that.childNum,
					grade: that.grade,
				};
				if (data.payType == 'yue' && parseFloat(that.userInfo.nowMoney) < parseFloat(that.totalPrice))
					return that.$util.Tips({
						title: '余额不足！'
					});
			
				// #ifdef MP-WEIXIN
				openPaySubscribe().then(() => {
					uni.showLoading({
						title: '订单支付中'
					});
					that.payment(data);
				});
				// #endif
				// #ifndef MP-WEIXIN
				uni.showLoading({
					title: '订单支付中'
				});
				that.payment(data);
				// #endif
			},
			
			payment: function(data) {
				let that = this;
				orderBusCreate(data).then(res => {
					that.getOrderPay(res.data.orderNo, '支付成功');				
				}).catch(err => {
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					});
				});
			},
			
			
			getOrderPay: function(orderNo, message) {
				let that = this; 
				let goPages = '/pages/users/order_bus_pay_status/index?order_id=' + orderNo;
				orderBusPay({
					orderNo: orderNo,
					payChannel: that.payChannel,
					payType: that.payType,
					scene: 0 //下单时小程序的场景值
				}).then(res => {
					let jsConfig = res.data.jsConfig;
					switch (res.data.payType) {
						case 'weixin':
							that.weixinPay(jsConfig,orderNo,goPages);
							break;
						case 'yue':
							uni.hideLoading();
							return that.$util.Tips({
								title: message
							}, {
								tab: 5,
								url: goPages + '&status=1'
							});
							break;
						case 'weixinh5':
							uni.hideLoading();
							setTimeout(() => {
								location.href = jsConfig.mwebUrl + '&redirect_url=' + window.location.protocol + '//' + window.location.host +goPages + '&status=1';
							}, 100)
							break;
						case 'alipay':
							//#ifdef H5
							if (this.$wechat.isWeixin()) {
								// uni.redirectTo({
								// 	url: `/pages/users/alipay_invoke/index?id=${orderNo}&type=order`
								// });
								uni.hideLoading();
								return that.$util.Tips(
									{title: '支付成功',icon: 'success'}, 
									{tab: 5,url: goPages},);
							} else {
								//h5支付
								uni.hideLoading();
								that.formContent = res.data.alipayRequest;
								uni.setStorage({key: 'orderNo', data:orderNo});
								that.$nextTick(() => {
									document.forms['punchout_form'].submit();
								})
							}
							//#endif
							// #ifdef APP-PLUS
							let alipayRequest = res.data.alipayRequest;
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: alipayRequest,
								success: (e) => {
									uni.showToast({
										title: "支付成功"
									})
									setTimeout(res => {
										// uni.navigateTo({
										// 	url:'/pages/users/alipay_return/alipay_return?out_trade_no=' + orderNo + '&payChannel=' + 'appAlipay'
										// })
										uni.hideLoading();
										return that.$util.Tips(
											{title: '支付成功',icon: 'success'}, 
											{tab: 5,url: goPages},);
									}, 1000) 
								},
								fail: (e) => {
									console.log(e,'失败');
									that.cancelOrder(orderNo)
									return that.$util.Tips({title: '取消支付'});
									// uni.showModal({
									// 	content: "支付失败",
									// 	showCancel: false,
									// 	success: function(res) {
									// 		if (res.confirm) {
									// 			//点击确认的操作
									// 			// uni.navigateTo({
									// 			// 	url:'/pages/users/alipay_return/alipay_return?out_trade_no=' + orderNo + '&payChannel=' + 'appAlipay'
									// 			// })
									// 			uni.hideLoading();
									// 			return that.$util.Tips(
									// 				{title: '支付成功',icon: 'success'}, 
									// 				{tab: 5,url: goPages},);
									// 		}
									// 	}
									// })
								},
								complete: () => {
									uni.hideLoading();
								},
							});
							// #endif
							// #ifdef MP-ALIPAY
							let alipayRequest = res.data.alipayRequest;
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: alipayRequest,
								success: (e) => {
									uni.showToast({
										title: "支付成功"
									})
									setTimeout(res => {
										// uni.navigateTo({
										// 	url:'/pages/users/alipay_return/alipay_return?out_trade_no=' + orderNo + '&payChannel=' + 'appAlipay'
										// })
										uni.hideLoading();
										return that.$util.Tips(
											{title: '支付成功',icon: 'success'}, 
											{tab: 5,url: goPages},);
									}, 1000) 
								},
								fail: (e) => {
									console.log(e,'失败');
									that.cancelOrder(orderNo)
									return that.$util.Tips({title: '取消支付'});
									// uni.showModal({
									// 	content: "支付失败",
									// 	showCancel: false,
									// 	success: function(res) {
									// 		if (res.confirm) {
									// 			//点击确认的操作
									// 			// uni.navigateTo({
									// 			// 	url:'/pages/users/alipay_return/alipay_return?out_trade_no=' + orderNo + '&payChannel=' + 'appAlipay'
									// 			// })
									// 			uni.hideLoading();
									// 			return that.$util.Tips(
									// 				{title: '支付成功',icon: 'success'}, 
									// 				{tab: 5,url: goPages},);
									// 		}
									// 	}
									// })
								},
								complete: () => {
									uni.hideLoading();
								},
							});
							// #endif
							break;
					}
				}).catch(err => {
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					});
				});
			},
			weixinPay(jsConfig,orderNo,goPages){
				let that = this;
				// #ifdef MP
				uni.requestPayment({
					timeStamp: jsConfig.timeStamp,
					nonceStr: jsConfig.nonceStr,
					package: jsConfig.packages,
					signType: jsConfig.signType,
					paySign: jsConfig.paySign,
					ticket: that.productType==='normal'? null : jsConfig.ticket,
					success: function(ress) {
						uni.hideLoading();
						wxPayOrderBusResult(orderNo).then(res => {
							uni.hideLoading();
							return that.$util.Tips(
								{title: '支付成功',icon: 'success'}, 
								{tab: 5,url: goPages},);
						}).cache(err => {
							uni.hideLoading();
							// that.cancelOrder(orderNo)
							return that.$util.Tips({
								title: err
							});
						})
					},
					fail: function(e) {
						uni.hideLoading();
						that.cancelOrder(orderNo)
						return that.$util.Tips({title: '取消支付'});
					},
					complete: function(e) {
						uni.hideLoading();
				
					},
				})
				// #endif
				// #ifdef H5
				let data = {
					timestamp: jsConfig.timeStamp,
					nonceStr: jsConfig.nonceStr,
					package: jsConfig.packages,
					signType: jsConfig.signType,
					paySign: jsConfig.paySign
				};
				that.$wechat.pay(data).then(res => {
					if (res.errMsg == 'chooseWXPay:cancel') {
						uni.hideLoading();
						that.cancelOrder(orderNo)
						return that.$util.Tips({title: '取消支付'});
						// return that.$util.Tips(
						// {title: '取消支付'}, 
						// {tab: 5,url: goPages + '&status=2'});
					} else {
						wxPayOrderBusResult(orderNo).then(res => {
							uni.hideLoading();
							return that.$util.Tips(
							{title: '支付成功',icon: 'success'},
							{tab: 5,url: goPages});
						}).cache(err => {
							uni.hideLoading();
							return that.$util.Tips({
								title: err
							});
						})
					}
				}).cache(res => {
					uni.hideLoading();
					that.cancelOrder(orderNo)
					return that.$util.Tips({title: '取消支付'});
				});
				// #endif
				// #ifdef APP-PLUS
				uni.requestPayment({
					provider: 'wxpay',
					orderInfo: {
						"appid": jsConfig.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
						"noncestr": jsConfig.nonceStr, // 随机字符串
						"package": "Sign=WXPay", // 固定值
						"partnerid": jsConfig.partnerid, // 微信支付商户号
						"prepayid": jsConfig.packages, // 统一下单订单号 
						"timestamp": Number(jsConfig.timeStamp), // 时间戳（单位：秒）
						"sign": this.systemPlatform === 'ios' ? 'MD5' : jsConfig.paySign // 签名，这里用的 MD5 签名
					}, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
					success: function(res) {
						wxPayOrderBusResult(orderNo).then(res => {
							uni.hideLoading();
							let url = '/pages/user/order_bus_pay_status/index?order_id=' + orderNo +'&msg=支付成功';
							uni.showToast({
								title: "支付成功"
							})
							setTimeout(res => {
								uni.redirectTo({
									url: url
								})
							}, 2000)
						}).cache(err => {
							// that.cancelOrder(orderNo)
							uni.hideLoading();
							return that.$util.Tips({
								title: err
							});
						})
					},
					fail: function(err) {
						uni.hideLoading();
						that.cancelOrder(orderNo)
						return that.$util.Tips({title: '取消支付'});
						// let url = '/pages/user/index?order_id=' + orderNo +'&msg=支付失败';
						// uni.showModal({
						// 	content: "支付失败",
						// 	showCancel: false,
						// 	success: function(res) {
						// 		if (res.confirm) {
						// 			uni.redirectTo({
						// 				url: url
						// 			})
						// 		}
						// 	}
						// })
					},
					complete: (err) => {
						uni.hideLoading();
					}
				});
				// #endif
			},
			
			
			
			cancelOrder(order_id){
				
				cancelByOrderId(order_id).then(res => {
					uni.navigateBack()
				}).catch(err => {
					uni.navigateBack()
					return that.$util.Tips({
						title: err
					});
				});
			},
			
			/**
			 * 获取当前订单详细信息
			 * 
			 */
			getConfirm: function() {
				let that = this;
				// return;
				loadPreOrderBusApi(this.preOrderNo).then(res => {
					// //微信支付是否开启
					// that.cartArr[0].payStatus = res.data.payWeixinOpen || 0
					// //支付宝是否开启
					// that.cartArr[2].payStatus = res.data.aliPayStatus || 0;
					// //#ifdef MP
					// that.cartArr[2].payStatus = 0;
					// //#endif
					// //余额支付是否开启
					// // that.cartArr[2].title = '可用余额:' + res.data.userInfo.now_money;
					// // that.cartArr[2].number = res.data.userInfo.now_money;
					// that.cartArr[1].payStatus = res.data.yuePayStatus == 1 ? res.data.yuePayStatus : 0
				
				}).catch(err => {
					console.log('err',err)
					// uni.navigateTo({
					// 	url:'/pages/index/index'
					// })
					return that.$util.Tips({
						title: err.toString()
					}, {
						tab: 3,
						url: 1
					});
				});
			},
			
			peopleChange:function(){
				this.computePrice()
			},
			loginSuccess:function(data){
				if(data.flag == true){
					 this.initPassengerList()
				}else{
					
				}
				
			},
			// async initCoupon(line_id) {
			// 	var that = this
			// 	let dataList = await getCoupons({lineId: line_id,type: 4})
			// 	if(dataList.length){
			// 		that.couponList = dataList.data
			// 	}
			// },
			initUserInfo:function() {
				var that = this
				getUserInfo().then(res => {
					that.userInfo = res.data
					that.integral = res.data.integral
					that.cartArr[1].title = '可用余额:' + res.data.nowMoney;
					that.cartArr[1].number = res.data.nowMoney;
				})
			},
			initRegularDetail:function(planId){
				var that = this
				getLinePlanDetail({plan_id: planId}).then(res => {
					this.loading = false
					this.planInfo = res.data
					this.planInfo.aheadRefundTime = _formatFloat(this.planInfo.aheadRefundTime/60 , 2);
					that.planInfo.lineStations.forEach(function(item,index){
						/***不默认选择上下车点*/
						// if(index==0){
						// 	that.on_stop_id = item.line_stop_id
						// 	that.on_stop_name = item.stop_name
						// }
						// if(index==(that.planInfo.line_stations.length -1)){
						// 	that.off_stop_id = item.line_stop_id
						// 	that.off_stop_name = item.stop_name
						// }
						if(item.stopType==1){
							that.on_stop_arr.push(item)
						}
						if(item.stopType==2){
							that.off_stop_arr.push(item)
						}
					})
					
					
					setTimeout(() => {
						this.showSkeleton = false
					}, 750)
					
					if(this.isLogin==true){
						this.initPassengerList()
						// that.initCoupon(this.planInfo.line.id )
						
					}
					if(this.planInfo.stock <= 5){
						uni.showModal({
						    title: '温馨提示',
						    content: this.planInfo.stock?'当前班次座位数较少，还能购买'+ this.planInfo.stock+'张票，请尽快购买车票':'票已买完，请选择其他班次',
							showCancel: false,
							confirmText: '我已知晓',
						    success: function (res) {
						        if (res.confirm) {
						            // console.log('用户点击确定');
									// uni.navigateBack({
										
									// })
						        } else if (res.cancel) {
						           
						        }
						    }
						});
					}
				}).catch(err => {
					
					setTimeout(() => {
						this.showSkeleton = false
					}, 750)
					return this.$util.Tips({
						title: err
					});
				})
			},
			initPassengerList:function(){
				let that = this
				getPassengerList().then(res => {
					that.passengerList = res.data
					if(that.passengerList.length > 0)
					{
						that.passengerList.forEach(function(res,index) {
							if(index==0){
								that.passengerList[index].check = true
							} else {
								that.passengerList[index].check = false
							}
						})	
					}
					
					that.initUserInfo()
					
					setTimeout(function(){
						that.planInfo.normalPrice?that.computePrice():''
					},200)
				})
			},
			
			selectPassenger:function(index){
				this.passengerList[index].check = !this.passengerList[index].check
				
				var passNum = 0;
				this.passengerList.forEach(function(res){
					if(res.check==true){
						passNum++
					}
				})
				
				

				if(passNum > this.planInfo.perBuyNum){
					this.passengerList[index].check = false
					uni.showModal({
					    title: '温馨提示',
					    content: '当前班次最多一次购买'+this.planInfo.perBuyNum+'张票',
						showCancel: false,
						confirmText: '我已知晓',
					    success: function (res) {
					        if (res.confirm) {
					            console.log('用户点击确定');
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
					
					return
				} else if(passNum > this.planInfo.stock){
					this.passengerList[index].check = false
					uni.showModal({
					    title: '温馨提示',
					    content: this.planInfo.stock?'当前班次座位数不够了，只能购买'+ this.planInfo.stock+'张票':'票已买完，请选择其他班次',
						showCancel: false,
						confirmText: '我已知晓',
					    success: function (res) {
					        if (res.confirm) {
					            console.log('用户点击确定');
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
					
					return
				} else{
					this.flag++
				}
				
				this.computePrice()
				
				
			},
			
			delectPassenger:function(index){
				this.passengerList[index].check = false
				this.flag++
			},
			
			editPassenger:function(item){
				uni.navigateTo({
					url:'/pages/add_passenger/index?id='+item.id+'&idCard='+item.idCard+'&name='+item.name+'&phone='+item.phone+'&type='+item.type
				})
			},
			// tabs通知swiper切换
			tabsChange:function(index) {
				this.swiperCurrent = index;
			},
			
			showNeedModel:function(current){
				this.needShow = true
				this.current = current;
				this.swiperCurrent = current;
				
			},
			
			goPlanDetail(){
				uni.navigateTo({
					url: '/pages/bus/station/index?plan_id='+this.planId
				})
			},
			
			/**
			 * 使用优惠券
			 */
			useCoupon:function(coupon_id,item) {
				// if (this.totalPrice <= 0) {
				// 	return
				// } 
				if(this.totalPrice<=0){
					return;
				}
				 if (this.useIntegral) {
					 this.$util.Tips({title: "优惠券和积分不能同时使用"});
				} else {
					if(this.totalPrice < item.useMinPrice){
						return this.$util.Tips({title: "不满足使用条件"});
					}
					this.couponList.forEach(res => {
						if (res.id == coupon_id) {
							res.isUse = !res.isUse
						} else {
							res.isUse = 0
						}
					})
					this.computePrice()
				}
			
			
			},
			
			computePrice:function() {
				var that = this;
				var planInfo = that.planInfo,
					currentCouponIndex = that.currentCouponIndex;
				var totalPrice = 0;
				// var price = planInfo.normal_price;
				var price = that.getLinePrice();
					// totalPrice = _formatFloat(peopleNum* price, 2);
				that.adultTicketNum = 0
				that.childTicketNum = 0
				
				if(price&&planInfo.isPassenger){
					that.passengerList.forEach(function(item){
						
						// 成人票
						if(planInfo&&item.check&&item.type==1){
							totalPrice = _add(totalPrice,_formatFloat(price,2)) 
							that.adultTicketNum++
						}else if(planInfo&&item.check&&item.type==2){
							totalPrice = _add(totalPrice,_formatFloat(_mul(price,0.5),2))  
							that.childTicketNum++
						}
					})	
				} else if(price&&!planInfo.isPassenger) {
					that.adultTicketNum = that.peopleNum
					totalPrice = _formatFloat(_mul(price,that.peopleNum),2)
				}
				
				
					
				
			
				var originTotalPrice = totalPrice
			
				//重新计算
				totalPrice = that.computeWithCouponPrice(that, totalPrice) ;
				totalPrice = that.computeWithIntegralPrice(that, totalPrice);
				// totalPrice = that.computeWithFullReduction(that, totalPrice);
			         
			
				that.totalPrice = totalPrice
				
				
				
				that.couponMoney = originTotalPrice - totalPrice;
			},
			//重新计算 优惠券 积分等等
			computeWithCouponPrice:function(that, totalPrice) {
				var currentCoupon = this.coupon.list.find((element) => (element.isUse == 1));
				// that.couponId = currentCoupon ? currentCoupon.id : 0
				// that.couponTitle = currentCoupon ? currentCoupon.couponTitle : ''
				if (!currentCoupon) {
					return totalPrice;
				}
				var newPrice = totalPrice;
				newPrice = _formatFloat(totalPrice - currentCoupon.money, 2);
				return Number(newPrice) > 0 ? Number(newPrice) : _formatFloat(0, 2);
			},
			//重新计算 优惠券 积分等等
			computeWithIntegralPrice:function(that, totalPrice) {
				if (!that.useIntegral) {
					return totalPrice;
				}
				var newPrice = totalPrice;
				if (newPrice >= that.integral / 100) {
					newPrice = _formatFloat(newPrice - that.integral / 100, 2)
					that.integral = 0
				} else {
					newPrice = 0.01
					that.integral = (that.integral - newPrice * 100)
				}
			
			
				return Number(newPrice) > 0 ? Number(newPrice) : _formatFloat(0, 2);
			},
			
			
			
			
			lookStation:function(item){
				let that = this
				this.currentStop = {
					lng: item.lng,
					lat: item.lat,
					stop_id: item.lineStopId,
					id: item.id,
					stop_name: item.stopName,
					images: item.image
				}
				
				uni.showActionSheet({
					itemList: ['查看实景图','导航去这里'],
					success: function (res) {
						that.daClick(res.tapIndex)
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
				
			
			},
			//导航
			daClick:function(e) {
				var that = this
				if(e==1){
					uni.openLocation({
						//​使用微信内置地图查看位置。
						latitude: parseFloat(that.currentStop.lat),
						longitude: parseFloat(that.currentStop.lng),
						name: that.currentStop.stop_name
					});
				} else {
					
				   that.currentStop.images.length?that.joinQun():that.$util.Tips({title: '该站点暂无站点图片'});
				}
			},
			joinQun:function(){
				   // 预览图片
				
				   var that = this
				   
				   var 	urls = that.currentStop.url?that.currentStop.url:that.currentStop.images
				   // console.log('urls',urls)
				   uni.previewImage({
					current: 0,   
				   	urls: urls,
					fail(err) {
						console.log('err', err)
					}
				   });
			},
			childComfirm:function(){
				this.applyChildShow = false
			},
			childCancel:function(){
				this.childNum = 0
				this.applyChildShow = false
			}
				
		 }
		
	}
</script>

<style lang="scss" scoped >
	// page{
	// 	 background-image: linear-gradient(#0c79ff, #ffffff) !important;
	// 	/* background:linear-gradient(#0c79ff, #ffffff); */

	// }
	.main {
	    background: linear-gradient(to bottom,#007AFF,#007AFF,#efeff4,#efeff4,#efeff4,#efeff4);
		height: 100%;
		padding-bottom: 80px;
	}
	.go-item {
		border-radius: 5px;
		background-color: #1f73d9;
		color: #FFFFFF;   
		 width: 20px; 
		 height: 20px;
		 text-align: center;
		 margin-right: 5px;
		 font-size: 12px;
		 line-height: 20px;
	}
	.back-item {
		border-radius: 5px;
		background-color: #ff5303;
		color: #FFFFFF;   
		 width: 20px; 
		 height: 20px;
		 text-align: center;
		 margin-right: 5px;
		 font-size: 12px;
		 line-height: 20px;
	}
	
	.no-active{
		width: 27%;
		height: 35px;
		border-radius: 5px;
		border: 1px solid #e5e5e5;
		margin: 0 15px 10px 0;
		text-align: center;
		line-height: 35px;
		position: relative;
	}
	.in-active{
		width: 27%;
		height: 35px;
		border-radius: 5px;
		border: 1px solid #0c79ff;
		margin: 0 15px 10px 0;
		text-align: center;
		line-height: 35px;
		position: relative;
	}
	.gou {
		position: absolute;
		float: right;
		right: 0;
		background-color: #0c79ff;
		width: 15px;
		height: 10px;
		line-height: 10px;
		bottom: 0;
		border-bottom-right-radius: 3px;
		border-top-left-radius: 5px;
	}
	.content {
		padding: 24rpx;
		text-align: center;
	}
	
	.jingdong {
		margin-top: 40rpx;
		width: 700rpx;
		height: auto;
		background-color: #ffffff;
		display: flex;
	
		.left {
			padding: 0 30rpx;
			background-color: #26A2FF;
			text-align: center;
			font-size: 28rpx;
			color: #ffffff;
	
			.sum {
				/* margin-top: 50rpx; */
				font-weight: bold;
				font-size: 32rpx;
	
				.num {
					font-size: 80rpx;
				}
			}
	
			.type {
				//margin-bottom: 50rpx;
				font-size: 24rpx;
			}
		}
	
		.right {
			padding: 20rpx 20rpx 0;
			font-size: 28rpx;
	
			.top {
				border-bottom: 2rpx dashed #26a2ff;
	
				.title {
					margin-right: 60rpx;
					line-height: 40rpx;
	
					.tag {
						padding: 4rpx 20rpx;
						background-color: #26a2ff;
						border-radius: 20rpx;
						color: #ffffff;
						font-weight: bold;
						font-size: 24rpx;
						margin-right: 10rpx;
					}
				}
	
				.bottom {
					display: flex;
					margin-top: 20rpx;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 10rpx;
	
					.date {
						font-size: 20rpx;
						flex: 1;
					}
	
					.immediate-use {
						height: auto;
						padding: 0 20rpx;
						font-size: 24rpx;
						border-radius: 40rpx;
						line-height: 40rpx;
						color: #26a2ff;
						border: 2rpx solid #26a2ff;
						margin-left: 10px;
					}
	
					.on-use {
						height: auto;
						padding: 0 20rpx;
						font-size: 24rpx;
						border-radius: 40rpx;
						line-height: 40rpx;
						color: #bebdb6;
						border: 2rpx solid #bebdb6;
						margin-left: 10px;
					}
				}
			}
	
			.tips {
				width: 100%;
				line-height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
	
				.transpond {
					margin-right: 10rpx;
				}
	
				.explain {
					display: flex;
					align-items: center;
				}
	
				.particulars {
					width: 30rpx;
					height: 30rpx;
					box-sizing: border-box;
					padding-top: 8rpx;
					border-radius: 50%;
					background-color: #c3c3c3;
					text-align: center;
				}
			}
		}
	}
	
	
	.footer {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: 130rpx;
		background-color: #fff;
		padding: 0 10px 0 10px;
		font-size: 32rpx;
		color: #333;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		align-items: center;
		justify-content: space-between;
		z-index: 5;
		box-shadow: 0px 4px 10px 0px #353535;
	}
	
	
	.pay-button{
		height: 35px;
		width: 85px;
		background-image: linear-gradient(to right,#ffa154, #ff7d49);
		border-radius: 5px;
		color: #FFFFFF;
		line-height: 35px;
		text-align: center;
		font-weight: 500;
	}
	.opcity-bg{
		background-color: #1b1b1b;
		opacity: 0.5;
		height: 30px;
		border-radius: 20px;
		color: #FFFFFF;
		line-height: 30px;
		padding: 0 5px;
	}
	.opcity-bg2{
		background-color: #1b1b1b;
		opacity: 0.5;
		height: 30px;
		border-radius: 20px;
		color: #FFFFFF;
		line-height: 30px;
		padding: 0 5px;
	}
	.popup-button{
		background-color: #007AFF;
		height: 35px;
		line-height: 35px;
		border-radius: 4px;
		margin: 30px 20px 20px 20px;
		text-align: center;
		color: #FFFFFF;
	}
	.month-bg{
		margin: 10px;
		background-color: #f3f3f3;
		padding: 10px;
		border-radius: 5px;
	}
	.month-item{
		margin: 0 5px 3px 5px;
	}
	
	.item textarea {
		background-color: #f9f9f9;
		width: 690rpx;
		height: 80rpx;
		border-radius: 3rpx;
		margin-top: 20rpx;
		padding: 25rpx 28rpx;
		box-sizing: border-box;
	}
	
	 .item .placeholder {
		color: #ccc;
	}
	.placeholder-textarea {
		position: relative;
	
		.placeholder {
			position: absolute;
			color: #ccc;
			top: 26rpx;
			left: 30rpx;
		}
	}
	
	.cart {
		margin-top: 50rpx;
		margin-bottom: 30rpx;
		padding: 0 30rpx;
	}
	
	.cart .title {
		font-size: 30rpx;
		color: #999;
	}
	
	.cart .carnum {
		height: 54rpx;
	}
	
	.cart .carnum view {
		// border: 1px solid #a4a4a4;
		width: 84rpx;
		text-align: center;
		height: 100%;
		line-height: 54rpx;
		color: #282828;
		font-size: 45rpx;
	}
	
	.cart .carnum .reduce {
		border-right: 0;
		border-radius: 6rpx 0 0 6rpx;
		line-height: 48rpx;
	}
	
	.cart .carnum .reduce.on {
		// border-color: #e3e3e3;
		color: #DEDEDE;
		font-size: 44rpx;
	}
	
	.cart .carnum .plus {
		border-left: 0;
		border-radius: 0 6rpx 6rpx 0;
		line-height: 46rpx;
	}
	
	.cart .carnum .plus.on {
		border-color: #e3e3e3;
		color: #dedede;
	}
	
	.cart .carnum .num {
		background: rgba(242, 242, 242, 1);
		color: #282828;
		font-size: 28rpx;
		border-radius: 12rpx;
		line-height: 29px;
		height: 54rpx;
	
		input {
			display: -webkit-inline-box;
		}
	}
	
	.order-submission .wrapper {
		background-color: #fff;
		margin: 12px;
	}
	
	.order-submission .wrapper .item {
		padding: 27rpx 24rpx;
		font-size: 30rpx;
		color: #333333;
		border-bottom: 1px solid #F5F5F5;
	}
	
	.order-submission .wrapper .item .discount {
		font-size: 30rpx;
		color: #333;
	}
	
	.order-submission .wrapper .item .discount .iconfont {
		color: #515151;
		font-size: 30rpx;
		margin-left: 15rpx;
	}
	
	.order-submission .wrapper .item .discount .num {
		font-size: 32rpx;
		margin-right: 20rpx;
	}
	
	.order-submission .wrapper .item .shipping {
		font-size: 30rpx;
		color: #999;
		position: relative;
		padding-right: 58rpx;
	}
	
	.order-submission .wrapper .item .shipping .iconfont {
		font-size: 35rpx;
		color: #707070;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		margin-left: 30rpx;
	}

	.order-submission .wrapper .item .placeholder {
		color: #ccc;
	}
	
	.order-submission .wrapper .item .list {
		margin-top: 35rpx;
	}
	
	.order-submission .wrapper .item .list .payItem {
		border: 1px solid #eee;
		border-radius: 14rpx;
		height: 86rpx;
		width: 100%;
		box-sizing: border-box;
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #282828;
	}
	
	.order-submission .wrapper .item .list .payItem.on {
		border-color: #fc5445;
		@include coupons_border_color(theme);
		color: $theme-color;
	}
	
	.order-submission .wrapper .item .list .payItem .name {
		width: 50%;
		text-align: center;
		border-right: 1px solid #eee;
	}
	
	.order-submission .wrapper .item .list .payItem .name .iconfont {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 44rpx;
		background-color: #fe960f;
		color: #fff;
		font-size: 30rpx;
		margin-right: 15rpx;
	}
	
	.order-submission .wrapper .item .list .payItem .name .iconfont.icon-weixin2 {
		background-color: #41b035;
	}
	.order-submission .wrapper .item .list .payItem .name .iconfont.icon-zhifubao {
		background-color: #00AAEA;
	}
	.order-submission .wrapper .item .list .payItem .tip {
		width: 49%;
		text-align: center;
		font-size: 26rpx;
		color: #aaa;
	}
</style>
